<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
</head>

<body>
    <button>Display video</button>

    <div class="hidden">
        <video>
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
            <p>
                Your browser doesn't support HTML video. Here is a
                <a href="rabbit320.mp4">link to the video</a> instead.
            </p>
        </video>
    </div>

    <script>
        const btn = document.querySelector("button");
        const box = document.querySelector("div");
        const video = document.querySelector("video");

        btn.addEventListener("click", () => box.classList.remove("hidden"));
        video.addEventListener("click", () => video.play());
        box.addEventListener("click", () => box.classList.add("hidden"));



    </script>

</body>

</html>
<style>
    .hidden {
        visibility: hidden;
    }
</style>